<template>
	<div class="card m5 p10 flex_col_center">
		<label>参数设置/查询</label>
		<div class="flex_row_center mt5">
			<el-select style="width: 200px;" v-model="ctx.select">
				<el-option v-for="(item, index) in keys" :key="index" :label="item" :value="item" />
			</el-select>
			<el-button @click="onClickGet" class="ml5" type="primary">查询</el-button>
		</div>
		<div class="flex_row_center flex_start_self mt5">
			<el-input style="width: 100px;" v-model="ctx.value" />
			<el-button class="ml5" @click="onClickSet" type="warning">设置</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">

import { reactive } from 'vue'
import { runAction2, runAction } from '../utils/ui';
import service from '../service/service';

const keys = [
	'流量计参数',
	'蒸汽加热温度',
	'蒸汽加热压力',
	'蒸汽加热超时时间',
	'舜热器加热温度',
	'瞬热器加热超时时间',
	'抽水超时时间',
];

interface Ctx {
	select: string,
	value: string,
}

const ctx = reactive<Ctx>({
	select: keys[0],
	value: '0'
});

async function onClickGet() {
	runAction2(ctx.select, '查询', async (dialog) => {
		const v = await service.get_param(keys.indexOf(ctx.select));
		dialog.success(`${ctx.select}:${v}`);
	});
}

async function onClickSet() {
	runAction(ctx.select, '设置', async () => {
		const v = parseInt(ctx.value);
		await service.set_param(keys.indexOf(ctx.select), v);
	});
}

</script>
